<template>
  <div class="pac-apply-base">
    <div class="drawer-wrap">
      <div class="drawer-content tag-scrollbar">
        <el-form :model="editForm" :rules="editFormRules" ref="editForm" label-width="0">
          <div class="content-divider first">
            <div class="clearfix">
              <div class="number">01</div>
              <div class="divider-title">基本信息<br />Essential information</div>
              <div class="bg"></div>
            </div>
          </div>
          <el-row :gutter="20">
            <el-col :span="24">
              <div class="source-item">
                <div class="source-title linear-blue">API名称</div>
                <div class="source-content">
                  <el-form-item prop="apiNm">
                    <el-input v-model="apiInfo.apiNm" disabled></el-input>
                  </el-form-item>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="source-item appfm">
                <div class="star"></div>
                <div class="source-title linear-purpose">
                  <icon-svg name="iconAppPlfm"></icon-svg>
                  <p>应用平台</p>
                </div>
                <div class="source-content">
                  <el-form-item prop="appPlfmId">
                    <el-radio-group v-model="editForm.appPlfmId" class="tag-scrollbar">
                      <el-radio
                        v-for="item in appPlfm"
                        :key="item.appPlfmId"
                        :label="item.appPlfmId"
                        :disabled="item.applyApiId !== '0'"
                      >
                        <template v-if="item.applyApiId === '0'">{{ item.appPlfmNm }}</template>
                        <el-tooltip v-else effect="dark" content="该平台已申请" placement="top" :enterable="false">
                          <span>{{ item.appPlfmNm }}</span>
                        </el-tooltip>
                      </el-radio>
                    </el-radio-group>
                  </el-form-item>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="source-item appfm">
                <div class="star"></div>
                <div class="source-title linear-green">
                  <icon-svg name="iconDataPlfm"></icon-svg>
                  <p>数据平台</p>
                </div>
                <div class="source-content">
                  <el-form-item prop="dataPlfmId">
                    <el-radio-group v-model="editForm.dataPlfmId" class="tag-scrollbar" v-if="apiInfo.apiType === 1">
                      <el-radio v-for="item in dataPlfm" :key="item.plfmId" :label="item.plfmId">{{
                        item.plfmNm
                      }}</el-radio>
                    </el-radio-group>
                    <el-checkbox-group v-model="editForm.dataPlfmId" class="tag-scrollbar" v-if="apiInfo.apiType === 2">
                      <el-checkbox v-for="item in dataPlfm" :key="item.plfmId" :label="item.plfmId">{{
                        item.plfmNm
                      }}</el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="drawer-btns">
      <el-button @click="beforeClose">取消</el-button>
      <el-button type="primary" size="medium" @click="submit">下一步</el-button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    apiInfo: {
      type: Object,
      required: true,
      default: () => {}
    }
  },
  data() {
    return {
      appPlfm: [],
      dataPlfm: [],
      editForm: {
        apiNm: '',
        appPlfmId: '',
        dataPlfmId: []
      },
      editFormRules: {
        appPlfmId: [{ required: true, message: '应用平台必须选择', trigger: 'change' }],
        dataPlfmId: [{ required: true, message: '数据平台必须选择', trigger: 'change' }]
      }
    }
  },
  methods: {
    getPlatforms() {
      if (this.apiInfo.apiType === 1) this.editForm.dataPlfmId = ''
      else this.editForm.dataPlfmId = []
      this.$nextTick(() => this.$refs.editForm.clearValidate())
      this.$ajax({
        url: this.$ajax.setUrl(`pac/pacAppApi/plfm/${this.apiInfo.apiId}`),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.appPlfm = data.data.astAppPlatformList
          this.dataPlfm = data.data.mtaPlatformList
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    beforeClose() {
      this.clearForm()
      this.$emit('close')
    },
    clearForm() {
      this.appPlfm = []
      this.dataPlfm = []
      this.editForm.apiNm = ''
      this.editForm.appPlfmId = ''
      this.editForm.dataPlfmId = this.apiInfo.apiType === 1 ? '' : []
      this.$nextTick(() => this.$refs.editForm.clearValidate())
    },
    submit() {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          this.$ajax({
            url: this.$ajax.setUrl('pac/pacAppApi'),
            method: 'post',
            data: this.$ajax.setData({
              apiId: this.apiInfo.apiId,
              appPlfmId: this.editForm.appPlfmId,
              dataPlfmId: this.apiInfo.apiType === 1 ? this.editForm.dataPlfmId : this.editForm.dataPlfmId.join(',')
            })
          }).then(({ data }) => {
            if (data && data.code === '0') {
              this.$message.success(data.msg)
              this.$emit('next', data.data)
            } else {
              this.$message.error(data.data || data.msg)
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">
.pac-apply-base {
  .el-row:nth-of-type(2) {
    margin-top: 40px;
  }
  .el-input__inner {
    padding-left: 20px;
  }
  .linear-blue:after {
    border-left: 10px solid #635fd7;
  }
  .linear-purpose:after {
    border-left: 10px solid #7c6bed;
  }
  .linear-green:after {
    border-left: 10px solid #36b999;
  }
  .source-item {
    width: 100%;
    height: 45px;
    margin-bottom: 20px;
    box-shadow: #eee 0 0 10px;
    position: relative;
    .source-title {
      font-weight: bold;
      width: 150px;
      height: 100%;
      padding-left: 50px;
      line-height: 45px;
      color: #fff;
      position: absolute;
      z-index: 2;
      &:before {
        width: 10px;
        height: 10px;
        content: '';
        background-color: #eee9ff;
        border: 2px solid #cfc7ee;
        margin-top: -5px;
        position: absolute;
        top: 50%;
        left: 20px;
        border-radius: 50%;
      }
      &:after {
        width: 0;
        height: 0;
        content: '';
        margin-top: -10px;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        position: absolute;
        top: 50%;
        right: -10px;
      }
    }
    .source-content {
      line-height: 45px;
      padding-left: 150px;
    }
    .el-input .el-input__inner {
      height: 45px;
      line-height: 45px;
    }
  }
  .appfm {
    height: 150px;
  }
  .appfm,
  .datafm {
    .source-title {
      padding-left: 0;
      text-align: center;
      line-height: normal;
      &:before {
        display: none;
      }
      svg {
        width: 30px;
        height: 30px;
        margin: 35px 0 10px 0;
      }
    }
    .source-content {
      height: 100%;
      .el-form-item,
      .el-form-item__content {
        height: 100%;
      }
      .el-radio-group {
        width: 100%;
        height: 100%;
        overflow-y: auto;
      }
      .el-radio {
        display: block;
        margin-top: 17px;
        margin-left: 20px;
      }
      .el-checkbox-group {
        width: 100%;
        height: 100%;
        overflow-y: auto;
      }
      .el-checkbox {
        display: block;
        margin-left: 20px;
      }
    }
  }
}
</style>
